<template>
  <div class="info-box">
    <div class="i-nav user-none">
      <span class="c-title-4">{{ $t('message.News.info.a') }}</span>
      <span class="more" @click="toMore">
        {{ $t('message.Rank.g') }}
        <span class="iconfont icon-gengduo"></span>
      </span>
    </div>
    <div class="i-empty" v-if="windowList.length == 0">
      <JEmpty></JEmpty>
    </div>
    <div class="i-list" v-else>
      <div class="i-item" v-for="(j, jindex) in windowList">
        <div class="row1 user-none">
          <h1 class="seo-tag">chainingview</h1>
          <div class="row1-title c-title-4 long-txt" @click="toNews(j.id)">{{ j.title }}</div>
          <div class="ago c-title-5">
            <TimeTips :text="j.matTime">{{ j.time }}</TimeTips>
          </div>
        </div>
        <div class="row2 c-title-5">{{ j.subTitle }}</div>
        <!-- <Operate class="row_3"></Operate> -->
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import indication from "../component/indication/index.vue";
import Operate from "@/components/monitor/components/operate.vue";
import { URL_PRESS_NEWS } from "@/comm/api";
import JEmpty from "@/components/j-empty/index.vue";
import { get } from "@/comm/request";
import { formatTimeAgo, formatTimestamp } from "@/comm/format";
import { ref, onMounted, onUnmounted } from "vue";
import { useRouter } from "vue-router";
import TimeTips from "@/components/timeTips/index.vue";
import { NEWS_ID_CHANGE, Bus } from "@/connetion/Bus";

const router = useRouter();
const onboarding = ref(0);
const windowList = ref<any[]>([]);
const dataAry = ref<any[]>([]);
let timerId = 0;
let timerId2 = 0;
onMounted(() => {
  timerId = window.setInterval(() => {
    getNews();
  }, 30000);
  timerId2 = window.setInterval(() => {
    windowList.value.forEach((val: any) => {
      val.time = formatTimeAgo(`${val.date}000`);
      val.matTime = formatTimestamp(Number(`${val.date}000`));
    })
  }, 3000);
  getNews();
});
onUnmounted(() => {
  clearInterval(timerId);
  clearInterval(timerId2);
});
async function getNews() {
  let res: any = await get(URL_PRESS_NEWS);
  // console.warn('获取新闻信息###########', res)
  res.data.sort((a: any, b: any) => (a.date > b.date ? -1 : 1));
  dataAry.value = res.data.slice(0, 10);
  dataAry.value.forEach(item => {
    item.time = formatTimeAgo(`${item.date}000`);
    item.matTime = formatTimestamp(Number(`${item.date}000`));
  });
  onboarding.value = 0;
  changeWindowList(res.data);
}
const changeWindowList = (list: any) => {
  // let result = []
  // for (let i = 0; i < list.length; i += 2) {
  //     if (i + 1 < list.length) {
  //         result.push([list[i], list[i + 1]]);
  //     } else {
  //         result.push([list[i]]);
  //     }
  // }
  windowList.value = list;
  // console.warn('新闻信息#########################', windowList.value)
};
function toNews(id: any) {
  // console.log('跳转前', router.currentRoute.value)
  if (router.currentRoute.value.name == 'news') {
    Bus.emit(NEWS_ID_CHANGE, id)
  } else {
    router.push({ path: "/news", query: { id } })
  }
}
function toMore() {
  router.push({ path: '/news' });
}
</script>

<style lang="less" scoped>  .info-box {
    display: flex;
    flex-direction: column;
    // border-bottom: 3px solid #2e3345;
    height: 100%;

    .i-nav {
      display: flex;
      align-items: center;
      justify-content: space-between;
      color: #eaecef;
      // margin: 15px 12px 4px;
      padding: 5px 12px 0 12px;
      height: 25px;

      .more {
        font-size: 12px;
        color: var(--color);

        &:hover {
          color: var(--main);
        }

        .icon-gengduo {
          font-size: 12px;
        }
      }
    }

    .i-empty {
      height: calc(100% - 30px);
      box-sizing: border-box;

      :deep(.j-none) {
        height: 100%;
      }
    }

    .i-list {
      height: calc(100% - 25px);
      // flex: 1;
      overflow-y: auto;

      .i-item {
        border-bottom: 1px solid #2e3345;
        padding: 15px 12px 5px 12px;
        display: flex;
        flex-direction: column;
        // justify-content: center;
        // height: calc(100% / 2);

        &:last-child {
          border-bottom: none;
        }

        // &:last-child {
        //     margin-bottom: 0;
        //     border-bottom: none;
        //     padding: 10px 12px 10px 12px;
        // }
      }
    }
  }

  .row1 {
    display: flex;
    margin-bottom: 8px;

    .row1-title {
      flex: 1 0 0;
      color: #eaecef;

      &:hover {
        text-decoration: underline;
      }
    }

    .ago {
      color: var(--main);
      margin-left: 10px;
    }
  }

  .row2 {
    color: #b7bdc6;
    margin-bottom: 10px;
    display: -webkit-box;
    /* 使用 WebKit 浏览器引擎的盒模型 */
    -webkit-line-clamp: 3;
    /* 最多显示4行 */
    -webkit-box-orient: vertical;
    /* 垂直排列 */
    overflow: hidden;
    /* 超出部分隐藏 */
    text-overflow: ellipsis;
    /* 显示省略号 */
  }
</style>
